<template>
  <div class="app-wrapper openSidebar">
    <div class="sidebar-container has-logo" v-if="!sidebar.hide">
      <div class="sidebar-logo-container">
        <a href="javascript:;" class="sidebar-logo-link router-link-active"
          ><img
            data-v-6494804b=""
            src="/static/img/logo.4eeb8a8e.png"
            class="sidebar-logo"
          />
          <h1 class="sidebar-title" style="color: rgb(255, 255, 255)">
            后台管理系统1
          </h1>
        </a>
      </div>
      <el-scrollbar
        class="el-scrollbar theme-dark"
        wrap-class="scrollbar-wrapper"
      >
        <el-menu
          :default-active="activeMenu"
          background-color="rgb(48, 65, 86)"
          :text-color="
            settings.sideTheme === 'theme-dark'
              ? variables.menuColor
              : variables.menuLightColor
          "
          :unique-opened="true"
          active-text-color="rgb(191, 203, 217)"
          :collapse-transition="false"
          mode="vertical"
        >
          <sidebar-item
            v-for="(route, index) in sidebarRouters"
            :key="route.path + index"
            :item="route"
            :base-path="route.path"
          />
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="main-container">
      <div class="screen-main">
        <div class="head">
          <div class="left">
            <div class="sidebar-logo-container">
              <a
                href="javascript:;"
                class="sidebar-logo-link router-link-active"
                @click="$router.push('/admin')"
                ><img
                  data-v-6494804b=""
                  src="@/assets/images/logo.svg"
                  class="sidebar-logo"
                />
                <h1
                  data-v-6494804b=""
                  class="sidebar-title"
                  style="color: rgb(255, 255, 255)"
                >
                  询价系统
                </h1>
              </a>
            </div>
          </div>
          <div class="right">
            <div class="right-top">
              <div class="tabs">
                <div class="tab-item active">购买列表</div>
              </div>
              <div class="setting">
                <div class="right-menu">
                  <el-dropdown
                    class="avatar-container right-menu-item hover-effect"
                    trigger="click"
                  >
                    <div class="avatar-wrapper">
                      {{ name }}
                      <i class="el-icon-caret-bottom" />
                    </div>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item divided @click.native="logout">
                        <span>退出登录</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="app-container">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >
            <el-form-item label="标的编码" prop="code">
              <el-select
                @change="changeCode"
                v-model="queryParams.code"
                filterable
                remote
                placeholder="请选择标的编码"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="item in options"
                  :key="item.code"
                  :label="item.code"
                  :value="item.code"
                >
                  <span>{{ item.code }} -- {{ item.codeName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标的名称" prop="codeName">
              <el-input
                :disabled="true"
                v-model="queryParams.codeName"
                placeholder="请选择标的编码"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            stripe
            v-loading="loading"
            :data="buyInfoList"
            @sort-change="handleSortChange"
          >
            <el-table-column
              label="姓名"
              width="100"
              align="center"
              prop="nickName"
              sortable="custom"
            />
            <el-table-column
              label="标的编码"
              min-width="70"
              align="center"
              prop="code"
              sortable="custom"
            />
            <el-table-column
              label="标的名称"
              min-width="70"
              align="center"
              prop="codeName"
            />
            <el-table-column
              label="名义本金"
              width="100"
              align="center"
              prop="benjin"
            />
            <el-table-column
              label="费率"
              width="60"
              align="center"
              prop="rate"
            />
            <el-table-column
              label="期权费"
              width="90"
              align="center"
              prop="amount"
            />
            <el-table-column
              label="天数"
              width="60"
              align="center"
              prop="days"
            />
            <el-table-column
              label="起始日"
              width="120"
              align="center"
              prop="startDate"
            />
            <el-table-column
              label="到期日"
              width="120"
              align="center"
              prop="endDate"
            />
            <el-table-column
              label="成交价"
              width="60"
              align="center"
              prop="cj"
            />
            <el-table-column
              label="结构"
              width="60"
              align="center"
              prop="struct"
            />
            <el-table-column
              label="执行价"
              width="60"
              align="center"
              prop="zxj"
            />
            <el-table-column label="现价" width="60" align="center" prop="xj" />
            <el-table-column
              label="参考净收益"
              width="140"
              align="center"
              prop="sy"
            />
            <el-table-column
              label="对手方"
              width="100"
              align="center"
              prop="dsf"
            />
            <el-table-column label="备注" align="center" prop="mark" />
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import variables from '@/assets/styles/variables.scss';
import SidebarItem from '@/layout/components/Sidebar/SidebarItem';

import {
  listBuyInfo,
  getBuyInfo,
  delBuyInfo,
  addBuyInfo,
  updateBuyInfo,
} from '@/api/work/buyinfo';
import { queryCompany } from '@/api/work/company';
export default {
  name: 'Screen',
  components: { SidebarItem },
  dicts: ['sys_normal_disable'],
  data() {
    return {
      sidebar: {
        hide: true,
      },
      settings: {
        sideTheme: 'theme-dar',
      },
      activeMenu: '/screen',
      sidebarRouters: [
        {
          name: 'Screen',
          path: '',
          hidden: false,
          redirect: '/screen',
          alwaysShow: true,
          meta: { title: '工作列表', icon: 'job', noCache: false, link: null },
          children: [
            {
              name: 'List',
              path: '/screen',
              hidden: false,
              meta: {
                title: '购买列表',
                icon: 'list',
                noCache: false,
                link: null,
              },
            },
          ],
        },
      ],

      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 价格表格数据
      buyInfoList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: undefined,
        codeName: undefined,
        orderByColumn: '',
        isAsc: '',
      },
      // 下拉菜单选项
      options: [],
    };
  },
  computed: {
    ...mapGetters(['name']),
    variables() {
      return variables;
    },
    // isCollapse() {
    //   return !this.sidebar.opened;
    // },
  },
  created() {
    this.getList();
  },
  methods: {
    // 退出登录
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/';
          });
        })
        .catch(() => {});
    },

    // change code 方法
    changeCode(e) {
      this.options.map((item, index) => {
        if (item.code == e) {
          this.queryParams.code = item.code;
          this.queryParams.codeName = item.codeName;
        }
      });
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        queryCompany(query).then((response) => {
          this.loading = false;
          console.log(response);
          this.options = response.data;
        });
      } else {
        this.options = [];
      }
    },
    /** 查询价格列表 */
    getList() {
      this.loading = true;
      listBuyInfo(this.queryParams).then((response) => {
        this.buyInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log('this.buyInfoList', this.buyInfoList);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    /** 排序 */
    handleSortChange({ prop, order }) {
      console.log('prop', prop);
      // 根据排序字段和顺序更新状态
      this.queryParams.orderByColumn = prop;

      // 调用 fetchData 方法来获取排序后的数据
      this.queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/variables.scss';
.sidebar-title {
  background: linear-gradient(93.68deg, #ffefd2, #ebcea6 34.82%, #e1b985) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 50px;
  font-size: 14px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  vertical-align: middle;
}
.sidebar-logo{
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 12px;
}
.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
  .main-container {
    margin: 0 !important;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.sidebarHide .fixed-header {
  width: 100%;
}

.mobile .fixed-header {
  width: 100%;
}
.screen-main {
  .head {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background: #1f2d3d;
    .left {
      padding: 0 20px 0 10px;
    }
    .right {
      flex: 1;
      .right-top {
        display: flex;
        height: 50px;
        font-size: 15px;
        color: #bfcbd9;
        justify-content: space-between;
      }

      .tabs {
        display: flex;
        height: 100%;
        .tab-item {
          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 0 19px;
        }
        .tab-item.active {
          font-weight: 700;
          color: #b38959;
          background: #304156;
        }
      }
      .el-dropdown {
        color: rgb(179, 137, 89);
        /* width: 79px; */
        height: 100%;
        margin-right: 16px;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }
}
.el-button--mini {
  background: linear-gradient(
    105.88deg,
    #e2c096,
    #d9b486 28.65%,
    #c79c68
  ) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.app-wrapper {
  ::v-deep label {
    font-weight: normal !important;
  }
  ::v-deep .el-button {
    font-size: 14px;
    font-weight: 500;
  }
  ::v-deep .el-table th {
    background-color: #f6f7f9 !important;
    color: #656668 !important;
    font-weight: 500;
  }
  ::v-deep .el-table td {
    font-size: 13px;
    color: #000;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(
      105.88deg,
      #e2c096,
      #d9b486 28.65%,
      #c79c68
    ) !important;
    border-color: transparent !important;
    color: #fff !important;
  }
  .el-icon-edit,
  .el-icon-delete {
    cursor: pointer;
    color: #b38959;
    font-weight: bold;
  }
  .el-icon-delete {
    color: red;
  }
  ::v-deep .el-table .ascending .sort-caret.ascending {
    border-bottom-color: #b38959;
  }
  ::v-deep .el-table .descending .sort-caret.descending {
    border-top-color: #b38959;
  }
}
.el-input.is-disabled .el-input__inner {
  color: #606266;
}
</style>
